<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/nanoscroller.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <style>
        
        .square-wrapper {
            height: 600px;
            top: 200px;
            background: #50a3a2;
            background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
            background: linear-gradient(to bottom right, #000000 0%, #888888 100%);            
        }
        
        .x {
            height: 1920px;
            
            min-height: 600px;
            margin-top: 600px;
            position: relative;
        }
        
        .user-face-area {
            width: 1200px;
            height: 200px;
            position: absolute;
            top: 40px;
            text-align:center;
            display: inline-block;
        }
        
        @media (min-width: 1200px) {
          .user-face-area {
            margin: 0 calc(50vw - 600px);
          }
        }
        
        @media (max-width: 1200px) {
          .user-face-area {
            margin: 0;
          }
        }       
        
        .left-area, .right-area {
            border-left: 15px solid;
            border-right: 15px solid;
            border-radius: 8px;
            padding: 0 15px;
            position: absolute;
            top: 60px;
            font-size: 25px;
            font-weight: bold;
            cursor: pointer;
            opacity: 0.25;
            transition: opacity 0.5s ease;
        }
        
        .right-area {
            right: 0px;
        }
        
        .left-area:hover, .right-area:hover {
            opacity: 1;
            transition: opacity 0.5s ease;
        }
        
        .user-face-area img {
            vertical-align: middle;
        }
        
        .user-face-img-area {      
            display: inline-block;
            vertical-align: middle;
        }
        
        #face {
            border: 3px solid #fff;
            border-radius: 200px;
            -webkit-box-shadow: #666 0px 3px 10px;
            box-shadow: rgba(0,0,0,0.8) 0px 3px 10px;
        }
        
        #user-name {
            margin-top: 15px;
            font-size: 25px;
            padding-bottom: 2px;
            border-bottom: 1px solid; 
        }
        
        #user-desc {
            margin-top: 5px;
        }
        
        /* 翅膀特效 */
        
        @keyframes left-wing-float {
            0%   { padding-right: 0; }
            50%  { padding-right: 50px; }
            100% { padding-right: 0; }
        }
        
        @keyframes right-wing-float {
            0%   { padding-left: 0; }
            50%  { padding-left: 50px; }
            100% { padding-left: 0; }
        }
        
        #left-wing, #right-wing {
            animation-duration: 3s;
            animation-iteration-count: infinite;            
        }
        
        #left-wing { animation-name: left-wing-float; }
        
        #right-wing { animation-name: right-wing-float; }
        
        .user-card-area {
            width: 1200px;
            height: 250px;
            top: 350px;
            position: absolute;
            display: flex;
            align-items: center;
            z-index: 1001;
        }
        
        @media (min-width: 1200px) {
          .user-card-area {
            margin: 35px calc(50vw - 600px) 35px calc(50vw - 600px);
          }
        }
        
        @media (max-width: 1200px) {
          .user-card-area {
            margin: 35px 0;
          }
        }
        
        .user-card {
            flex: 1 200px;
            height: 250px;
            margin: 0 5px;
            position: relative;
            background: rgba(255,255,255,0.8);
            border-radius: 3px; 
            transition: flex 0.5s ease, height 0.5s ease;
            padding: 3px;
            box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
        }
        
        .user-card:before {
            background: url(shadow-right.png) bottom center no-repeat;
            content: '';
            display: block;
            width: 100px;
            height: 15px;
            position: absolute;
            bottom: -10px;
            right: -7px;        
        }
        
        .user-card:after {
            background: url(shadow-left.png) bottom center no-repeat;
            content: '';
            display: block;
            width: 100px;
            height: 15px;
            position: absolute;
            bottom: -11px;
            left: -11px;            
        }        
        /*
            flex: 1.2 228px;
            height: 300px;
            transition: flex 0.5s ease, height 0.5s ease;
        
        
        
        */
        .user-card:hover {

        }
        
        .user-card img {
            width: 100%;
            height: 100%;
        }  
        
        .love {
            width: 25px;
            height: 25px;
            position: absolute;
            top: 0px;
            right: 7px;
            color: red;
            font-size: 25px;
            cursor: pointer;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;            
        }
        
        .title-name {
            width: calc(100% - 6px);
            height: 40px;
            bottom: 3px;
            position: absolute;
            background: rgba(0,0,0,0.6);
            font-size: 14px;
            line-height: 40px;
            text-align: center;
        }
        
        
        
        
        
        .nano { 
            width: 100%; 
            height: 100%; 
            min-width: 1200px;
        }
        
        .nano .nano-pane   { 
            background: #888; 
            width: 8px; 
        }
        
        .nano .nano-slider { 
            background: #111; 
        }
        
           
                
    </style>
</head>
<body>
    <div class="nano">
        <div class="nano-content">
            <div class="square-wrapper">
                <ul class="bg-bubbles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            
            <div class="user-face-area">
                <div class="left-area">
                    返回首页
                </div>
                <img id="left-wing" src="wl.png"></img>
                <div class="user-face-img-area">
                    <img src="face.jpg" width="200px" id="face"></img>
                    <div id="user-name">剃切绘里奈</div>
                    <div id="user-desc">难吃死啦~~难吃死啦~~难吃死啦~~</div>
                </div>
                <img id="right-wing" src="wr.png"></img>
                <div class="right-area">
                    退出登录
                </div>
            </div>    
            
            <div class="user-card-area">
                <div class="user-card">
                    <img src="c1.jpg" />
                    <div class="love">❤</div>
                    <div class="title-name">难吃死啦~~</div>
                </div>
                <div class="user-card">
                    <img src="c2.jpg" />
                    <div class="title-name"></div>
                </div>
                <div class="user-card">
                    <img src="c3.jpg" />
                    <div class="title-name"></div>
                </div>
                <div class="user-card">
                    <img src="c1.jpg" />
                    <div class="title-name"></div>
                </div>
                <div class="user-card">
                    <img src="c2.jpg" />
                    <div class="title-name"></div>
                </div>
                <div class="user-card">
                    <img src="c3.jpg" />
                    <div class="title-name"></div>
                </div>        
            </div>
 
            <div class="x">

            </div>        
        </div>
    </div>
    

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
    
    
    <script>
    $(function() {
        $(".nano").nanoScroller();    
    }); 
          
    </script>
</body>
</html>